import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Select, Input, Button } from 'antd';
import React, { useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import styles from './style.less'
import { templateDetail, getSelectDict } from '../service'

const SmsTemplateConfigAddOrEditForm = props => {
  const { smsTemplateConfigAddOrEditFormVisible, modalTitle, templateId, form, onCancel, onSubmit: handleSmsTemplateConfig } = props;

  // 表单格式
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  // 获取短信模板类型
  const { data: templateTypeD = [] } = useRequest(params => getSelectDict({ dataTypeCode: 'sms_template_type' }))
  // 获取短信模板标识符
  const { data: templateSignD = [] } = useRequest(params => getSelectDict({ dataTypeCode: 'sms_content_identifier' }))
  // 获取配置详情接口
  const { run: templateDetailR } = useRequest((params) => templateDetail(params), {
    manual: true,
    onSuccess: (data) => {
      form.setFieldsValue({
        templateCode: `${data.templateCode}-${data.templateBusinessType}`,
        templateName: data.templateName,
        templateContent: data.templateContent
      })
    }
  })

  // 插入标识符
  const insertSign = () => {
    form.setFieldsValue({
      templateContent: (form.getFieldsValue().templateContent ? form.getFieldsValue().templateContent : '') + (form.getFieldsValue().templateSign ? form.getFieldsValue().templateSign : '')
    })
  }

  // 确认
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleSmsTemplateConfig({ ...fieldsValue, templateCode: fieldsValue.templateCode.split('-')[0], templateBusinessType: fieldsValue.templateCode.split('-')[1] })
    });
  };

  useEffect(() => {
    if (templateId !== '') {
      templateDetailR({ id: templateId })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <>
      <Modal
        className={styles.smsTemplateConfigAddOrEditForm}
        title={[
          <div key="title">{modalTitle}</div>
        ]}
        visible={smsTemplateConfigAddOrEditFormVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <Form.Item
          {...layout}
          label="短信类型"
        >
          {form.getFieldDecorator('templateCode', {
            rules: [
              {
                required: true,
                message: '请选择短信类型'
              }
            ]
          })(<Select>
            {
              templateTypeD.map(item => (
                <Select.Option key={`${item.dataCode}-${item.dataValue}`}>{item.dataRemark}</Select.Option>
              ))
            }
          </Select>)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="短信名称"
        >
          {form.getFieldDecorator('templateName', {
            rules: [
              {
                required: true,
                message: '请输入短信名称'
              }
            ]
          })(<Input placeholder='请输入' />)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="模板标识符"
        >
          {form.getFieldDecorator('templateSign')(
            <Select>
              {
                templateSignD.map(item => (
                  <Select.Option key={item.dataValue}>{item.dataRemark}</Select.Option>
                ))
              }
            </Select>)}
        </Form.Item>
        <Button type='primary' onClick={() => insertSign()}>插入标识符</Button>
        <Form.Item
          {...layout}
          label="短信内容"
        >
          {form.getFieldDecorator('templateContent', {
            rules: [
              {
                required: true,
                message: '请输入短信内容'
              }
            ]
          })(<Input.TextArea placeholder='请输入' />)}
        </Form.Item>
      </Modal>
    </>
  );
};

export default Form.create()(SmsTemplateConfigAddOrEditForm);
